<!--
 * @Author: fanyaqing
 * @Date: 2021-08-06 08:04:23
 * @LastEditTime: 2021-08-06 09:00:15
 * @LastEditors: fanyaqing
 * @Description: 
 * @FilePath: \supermall\src\components\content\goods\GoodsList.vue
-->
<template>
  <div class="goods">
    <goods-list-item v-for="(item, index) in goods" :key="index" :goodsItem="item"></goods-list-item>
  </div>
</template>
<script>
import GoodsListItem from './GoodsListItem.vue'
export default {
  props:{
    goods:{
      type:Array,
      default:()=>{
        return [];
      }
    }
  },
  components:{
    GoodsListItem
  },
  data() {
    return {
      
    }
  },
}
</script>
<style scoped>
  .goods{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /* 使用space-arond，中间的间隙总等于连个侧边的间隙 */
    /* 所以使用padding属性，将中间和侧边间隙弄均匀 */
    padding: 0 1%;
    
  }
</style>